<template>
  <layout-slot :reArticle="reArticle">
    <article class="main-content page-page">
      <h1 class="post-title" itemprop="name headline">{{ pageInfo.title }}</h1>
      <div class="post-data">

        <time datetime="2020-07-23T10:30:00+08:00" itemprop="datePublished"><i class="fa fa-clock-o"
                                                                               aria-hidden="true"> </i>
          {{ pageInfo.date | dateFormat('{y}-{m}-{d}') }}
        </time>&nbsp;&nbsp; <i class="fa fa-comments-o" aria-hidden="true"></i> <a style="" class="" href="#comments">
        {{ comments }}
        评论</a>&nbsp;&nbsp;
        <i class="fa fa-eye" aria-hidden="true"></i> {{ pageInfo.view }} 浏览
      </div>
      <p>
      </p>
      <div id="post-content" class="post-content">
      </div>
      <ol class="comment-list">

        <li id="li-comment-693" class="comment-body comment-parent comment-odd" v-for="item of crossList">
          <div id="comment-693">
            <div class="comment-view" onclick="">
              <div class="comment-content">
                <span class="comment-author-at"></span>
                <p>{{ item.title }}</p>
                <p></p>
              </div>
              <div style="margin-bottom:30px;">
                  <span class="comment-author comment-by-author"
                        style="display:block;float:left;margin:0 !important;font-size:12px;"><i
                    class="fa fa-paper-plane-o" style="margin-right:4px;"></i>来自{{item.from}}</span>
                <time class="comment-time" style="font-size: 12px; float:right;">{{ item.date | dateFormat }}</time>
              </div>
            </div>
          </div>
        </li>

      </ol>
    </article>
    <div>

    </div>

    <twikoo/>
  </layout-slot>
</template>

<script>


  import { getMoviesDetail, getReArticle, recordCount } from '~/api'
  import { getCrossList } from '~/api/category'

  export default {
    name: "cross",

    data() {
      return {
        crossList: [
          // {title:"当你老了，白发苍苍，睡意朦胧，在炉前打盹，慢慢吟诵，梦见你当年的双眼，那柔美的光芒与青幽的晕影。 ",date:"2020-06-12",from:"叶子博客"},
          // {title:"你问我那么拼干嘛，我说我是一个惜时惜命的人。",date:"2020-06-11",from:"叶子博客"},
          // {title:"年轻吗？不要紧，听过几首歌，爱过几个人，就老了。",date:"2020-06-10",from:"叶子博客"},
        ],
        pageInfo: {},
        reArticle:[]
      }
    },

    computed:{
      comments(){
        return this.$store.state.comments
      }
    },

    methods: {
      getPageInfo() {

      },
      getCrossList() {

      }
    },
    mounted() {
      // this.getPageInfo()
      // this.getCrossList()
    },
    async asyncData({app,}){
      let crossList = [],pageInfo = {}
      await getCrossList(app.$axios).then(({data}) => {
        crossList = data.data.crossList.map((item) => {
          return {
            title: item.crossContent,
            date: item.crossCreated,
            from: item.crossFrom
          }
        })
      })
      await  getMoviesDetail(app.$axios,{path: "/cross"}).then(({data}) => {
        if (data.data) {
          pageInfo = {
            intro: data.data.articleContent,
            date: data.data.articleUpdated,
            view: data.data.articleViewCount,
            comments: data.data.articleCommentCount,
            title: data.data.articleTitle
          }
          // 记录浏览量
          recordCount(app.$axios,{id: data.data.oId}).then((res) => {
          })

        }
      })
      let reArticle = await getReArticle(app)
      return { crossList,reArticle,pageInfo}
    }
  }
</script>

<style lang="scss" scoped>
  #comments::before {
    padding: 0
  }
</style>
